<template>
  <div class="person">
    <Header title="个人中心"></Header>
    <section class="sect">
      <div class="genren">
        <div class="portrait">
          <i class="iconfont">&#xe619;</i>
        </div>
        <div class="xingxi">
          <div>{{ user.nickname }}</div>
          <div>{{ user.phone }}</div>
        </div>
      </div>
      <van-row class="tir">
        <van-col span="8">
          <h2>{{ user.balance }}</h2>
          <span>我的余额</span>
        </van-col>
        <van-col span="8">
          <h2>{{ discounts }}</h2>
          <span>我的优惠</span>
        </van-col>
        <van-col span="8">
          <h2>{{ user.integral }}</h2>
          <span>我的积分</span>
        </van-col>
      </van-row>
      <div class="choose">
        <div>
          <i class="i-left iconfont">&#xe704;</i>
          <span>我的订单</span>
          <i class="i-right iconfont">&#xe61f;</i>
        </div>
        <p></p>
        <div>
          <i class="i-left iconfont">&#xe607;</i>
          <span>积分商城</span>
          <i class="i-right iconfont">&#xe61f;</i>
        </div>
        <p></p>
        <div>
          <i class="i-left iconfont">&#xe61a;</i>
          <span>会员卡</span>
          <i class="i-right iconfont">&#xe61f;</i>
        </div>
      </div>
      <div class="choose">
        <div>
          <i class="i-left iconfont">&#xe60f;</i>
          <span>服务中心</span>
          <i class="i-right iconfont">&#xe61f;</i>
        </div>
        <p></p>
      </div>
    </section>
    <el-row>
      <el-button @click="logout()" class="butw" type="primary">退出</el-button>
    </el-row>
  </div>
</template>

<script>
import qs from "qs";
import Header from "../components/header.vue";
import { post } from "../api/http";

export default {
  name: "index",
  components: {
    Header: Header,
  },
  data() {
    return {
      user: {
        nickname: "",
        phone: "",
        balance: "0.00",
        integral: "0",
      },

      discounts: "0",
      token: "",
      value: "100",
      fileList: [
        { url: "https://img.yzcdn.cn/vant/leaf.jpg" },
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
        { url: "https://cloud-image", isImage: true },
      ],
    };
  },
  methods: {
    logout: function () {
      this.$axios
        .post("http://127.0.0.1:1995/clien/logout")
        .then((res) => {
          this.$confirm("是否退出", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            center: true,
          })
            .then(() => {
              this.$message({
                type: "success",
                message: "退出成功!",
              });
              this.$router.push("/login");
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消",
              });
            });
        })
        .catch((err) => {
          console.error(err);
        });
    },
    query() {
      this.$axios.post("http://127.0.0.1:1995/clien/query").then((res) => {});
    },
    async getinfo() {
      console.log(this.$store.state.token);
      this.token = this.$store.state.token;
      const param = {
        token: this.token,
      };
      const { data: res } = await post("/clien/getPerson", param);
      console.log(res);
      this.user = res.datas.user;
    },
  },
  created() {
    this.getinfo();

    this.query();
  },
  mounted() {},
};
</script>

<style>
.butw {
  width: 10rem;
}
.person {
  margin: 0px 0px;
  position: relative;
}
.genren {
  background-color: #cedde6;
  width: 100%;
  height: 5rem;
  margin-top: 0px;
  border-top: 0px solid #aeaee2;
}
.portrait {
  background-color: #fdf1df;
  z-index: 1;
  width: 4rem;
  margin-top: 9px;
  margin-left: 8px;
  height: 4rem;
  border-radius: 50%;
  float: left;
}
.portrait i {
  font-size: 4rem;
  margin: 0 auto;
}
.xingxi {
  width: 8rem;
  padding-top: 1rem;
  height: 3rem;
  margin: 1rem 5rem 0rem;
}
.xingxi div {
  color: #fff;
  font-size: 1.2rem;
  font-family: -webkit-body;
  font-weight: bold;
  text-align: left;
}
.tir {
  width: 100%;
  height: 6rem;
  background: #fdf8f3e3;
  border-bottom: 1px solid #d6cfcf75;
}
.tir div {
  width: 33.1744%;
  height: 100%;
  background: #e5e5eb;
  float: left;
}
.tir p {
  height: 60px;
  width: 1px;
  float: left;
}
.choose {
  margin-top: 1rem;
  background-color: #fff;
  border-top: 1px solid #a59d9d21;
  border-bottom: 1px solid #e1dde166;
  width: 100%;
  height: 10rem;
}
.choose p {
  width: 99.5%;
  border: 0.8px solid #d3cdcd7d;
  margin: 0;
}
.choose div {
  height: 3.2rem;
  /* border-top: 1px solid red;
	border-bottom: 1px solid red; */
}
.choose span {
  float: left;
  margin-top: 12px;
}
.i-left {
  float: left;
  margin-top: 14px;
  margin-left: 6px;
}
.i-right {
  float: right;
  margin-top: 14px;
}
.sect {
  margin-top: -16px;
}
</style>
